<template>
  <section>
    <div class="filter-container">
        <common-input @keyup.enter.native="handleFilter" class="w100" placeholder="商品关键字" v-model="listQuery.keyword" />
        <common-input @keyup.enter.native="handleFilter" class="w100 ml10" placeholder="供应商" v-model="listQuery.agency" />
        <el-select class="ml10" @change="getCateList(false)" size="mini" v-model="listQuery.parentCateId" placeholder="一级分类">
            <el-option
                    v-for="item in parentCateList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
            </el-option>
        </el-select>
        <el-select size="mini" class="ml10" v-model="listQuery.cateId" placeholder="二级分类">
            <el-option
                    v-for="item in cateList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
            </el-option>
        </el-select>
        <el-button size="mini" class="ml10" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <el-tabs size="mini" :before-leave='leaveTab' v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="待审核" name="2"></el-tab-pane>
      <el-tab-pane label="被驳回" name="4"></el-tab-pane>
    </el-tabs>
    <el-table :data="list"
                        @sort-change="tblSort"
                style="width: 100%">
            <el-table-column align="left" label="" width="140">
                <template slot-scope="scope">
                    <span><img :src="scope.row.listImgUrl" style="width:80px;cursor:pointer;" @click="viewPic(scope.row)" /></span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="商品">
                <template slot-scope="scope">
                    <span>{{scope.row.title}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="供应商" >
                <template slot-scope="scope">
                    <span>{{scope.row.agencyName}}</span>
                </template>
            </el-table-column>
            <el-table-column align="right" width="100" label="供货价" sortable="custom" prop="min_supply_price">
                <template slot-scope="scope">
                    <span>￥{{scope.row.minSupplyPrice}}</span>
                </template>
            </el-table-column>
            <el-table-column align="right" width="100" label="批发价" sortable="custom" prop="min_wholesale_price">
                <template slot-scope="scope">
                    <span>￥{{scope.row.minWholesalePrice}}</span>
                </template>
            </el-table-column>
            <el-table-column width="100" align="right" label="物流成本" sortable="custom" prop="freight_price">
                <template slot-scope="scope">
                    <span>￥{{scope.row.freightPrice}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="商品类目" >
                <template slot-scope="scope">
                    <span>{{scope.row.cateName}}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column align="left" label="状态" >
                <template slot-scope="scope">
                    <span>{{scope.row.statusText}}</span>
                </template>
            </el-table-column> -->
            <el-table-column align="center" label="提交时间" width="180" sortable="custom" prop="created_at">
                <template slot-scope="scope">
                    <span>{{scope.row.createdAt}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="审核时间" width="180" sortable="custom" prop="check_at">
                <template slot-scope="scope">
                    <span>{{scope.row.checkAt}}</span>
                    <p v-if="scope.row.auditStatus==3" style="color:red;">{{ scope.row.checkNote }}</p>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right" align="center" label="操作" width="120">
                <template slot-scope="scope">
                    <span>
                        <el-button v-if="scope.row.canCheck==1" type="text" @click="handleCheck(scope.row)">审核</el-button>
                        <el-dropdown class="ml10">
                        <el-button

                                type="text">
                            更多<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="handleDetail(scope.row)">查看</el-dropdown-item>
                            <el-dropdown-item v-if="scope.row.canEdit==1" @click.native="handleUpdate(scope.row)">编辑</el-dropdown-item>
                            <el-dropdown-item v-if="scope.row.canDelete==1" @click.native="handleDelete(scope.row)">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    </span>
                </template>
            </el-table-column>
    </el-table>

    <el-dialog title="商品审核" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="500px" @close="dialogClose">
        <el-form :model="form" ref="form" label-width="150px">
            <el-form-item label="操作类型" prop="status">
                <el-radio-group v-model="form.status">
                    <el-radio :label="1">通过</el-radio>
                    <el-radio :label="2">驳回</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="note">
                <common-input type="textarea" :autosize="{ minRows: 3, maxRows: 5}" placeholder="拒绝审核时必填" maxlength="100" v-model="form.note" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="cancel('form')">取消</el-button>
            <el-button :loading="checkLoading" size="mini" type="primary" @click="check('form')">确定</el-button>
        </div>
    </el-dialog>
  </section>
</template>

<script>
    import {
        product_list,
        product_delete,
        product_submit,
        product_check
    } from '../../api/product';
    import {
        agency_categories
    } from '../../api/agency';
    import Viewer from 'viewerjs';
    import 'viewerjs/dist/viewer.css';
    export default {
        components: {
        },
        data() {
            return {
                viewerId: null,
                cateList: [],
                parentCateList:[],
                list: null,
                listLoading: true,
                listQuery: {
                    page: 1,
                    num: 20,
                    keyword: undefined,
                    auditStatus: '2',
                    agency: undefined,
                    orderCol: "",
                    orderAsc: "",
                    cateId: undefined,
                    parentCateId: undefined,
                },
                total: null,
                activeName: '2',
                currentId: 0,
                dialogFormVisible: false,
                form: {
                    status: 1,
                    note: undefined,
                    id: 0,
                },
                checkLoading: false,
            }
        },
        mounted() {
        },
        created() {
            this.getParentCateList();
            this.getList();
        },
        methods: {
            getList() {
                this.listLoading = true;
                product_list(this.listQuery).then(response => {
                    this.list = response.data.list;
                    this.total = response.data.total;
                    this.listLoading = false;
                })
            },
            getParentCateList() {
                agency_categories(0).then((res)=>{
                    this.parentCateList = res.data;
                    this.cateList = []
                }).catch((err)=>{
                    this.parentCateList = []
                    this.cateList = []
                });
            },
            getCateList() {
                this.listQuery.cateId = undefined;
                agency_categories(this.listQuery.parentCateId).then((res)=>{
                    this.cateList = res.data;
                }).catch((err)=>{
                    this.cateList = []
                });
            },
            handleFilter() {
                this.listQuery.page = 1;
                this.getList();
            },
            handleSizeChange(val) {
                this.listQuery.num = val;
                this.getList();
            },
            viewPic(row) {
                if(row.imgUrls) {
                    let all_pic = row.imgUrls.split(",");
                    $("#pic_viewer").html("");
                    if(all_pic && all_pic.length > 0) {
                        all_pic.forEach((item, idx)=>{
                            var str  = '<li style="width:100%;">';
                            str += '<img rel-src="' + item + '" src="' + item + '">';
                            str += '</li>';
                            $("#pic_viewer").append(str);
                        })
                    }
                    this.viewerId && this.viewerId.destroy()
                    this.viewerId = new Viewer(document.getElementById('pic_viewer'));
                    $('#pic_viewer').find("img").eq(0).trigger("click")
                }
            },
            handleCurrentChange(val) {
                this.listQuery.page = val;
                this.getList();
            },
            handleClick(tab, event) {
                this.listQuery.auditStatus = this.activeName;
                this.handleFilter();
            // console.log(this.activeName)
            },
            leaveTab(activeName, oldActiveName) {
            // console.log(activeName)
            // return false;
            },
            handleUpdate(row) {
                this.$router.push("/goods_edit?id=" + row.id + "&from=" + encodeURIComponent(this.$router.currentRoute.name)) 
            },
            handleSubmit(row) {
                this.$confirm('此操作将提交商品审核, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        product_submit(row.id)
                            .then(() => {
                                this.$message.success("商品已提交审核");
                                this.getList();
                            });
                    }).catch(()=>{});
                
            },
            handleDelete(row) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        product_delete(row.id)
                            .then(() => {
                                this.$message.success("商品删除成功");
                                this.getList();
                            });
                    }).catch(()=>{});
            },
            handleCheck(row) {
                this.form.id = row.id;
                this.form.status = 1;
                this.form.note = "";

                this.dialogFormVisible = true;
            },
            handleDetail(row) {
                let {href} = this.$router.resolve({path: '/goods_detail?id=' + row.id});
                window.open(href, '_blank');
            },
            dialogClose() {
                this.$refs.form.resetFields();
            },
            cancel(formName) {
                this.dialogFormVisible = false;
                this.$refs[formName].resetFields();
            },
            check(formName) {
                this.form.note = $.trim(this.form.note)

                // console.log(this.form)
                if(this.form.status == 2) {
                    if(this.form.note.length < 1) {
                        this.$message.error("拒绝审核时备注必填");
                        return;
                    }
                }
                this.checkLoading = true;
                product_check(this.form.id, this.form).then((res)=>{
                    this.checkLoading = false;
                    this.$message.success("商品已审核");
                    this.dialogFormVisible = false;
                    this.getList();
                }).catch((err)=>{
                    this.checkLoading = false;

                })
            },
            tblSort(d) {
                this.listQuery.orderCol = d.prop;
                this.listQuery.orderAsc = d.order;

                this.handleFilter();
            }
        }
    };
</script>
<style lang="scss" scoped>
</style>
